{% extends "global/Page.html" %}
{{ block title }}
Примите решение
{{ endblock }}
{{ block content }}

<div class="card my-3">
    <div class="card-body">
        <div class="card-text">
            <ul class="list-group list-group-flush">
                <li class="list-group-item">
                    Теперь вам необходимо принять решение о вашем бонусе и бонусе участника Б.

                </li>
                <li class="list-group-item mx-3">

                 - В вашем распоряжении $1,00.
                </li>
                <li class="list-group-item mx-3">
              - Участник Б получил $0,50.

                </li>
                <li class="list-group-item">
                  Ваше решение:

                </li>
                <li class="list-group-item mx-3">
                   - Вы можете <b>отдать</b> до $0,50 из полученных вами денег участнику Б (выберите любую положительную сумму или ноль ниже).

                </li>
                <li class="list-group-item mx-3">
                    - Вы можете <b>взять</b> до $0,50 из полученных  участником Б денег (выберите любую отрицательную сумму или ноль ниже).

                </li>

            </ul>
        </div>
    </div>
</div>
{% if player.field_maybe_none('reveal') or subsession.treatment == 'forced_reveal' %}
    <div class="card my-3">
        <div class="card-body">
            <div class="card-text">
                <ul class="list-group list-group-flush">
                    <li class="list-group-item">
                        Участник Б, с которым вы состоите в паре,  <span
                            class="fw-bolder text-danger lead ">{{ player.get_partner_opinion }}</span>  со следующим утверждением:
                    </li>
                    <li class="list-group-item text-center lead my-3">
                        {{ Constants.statement_lgbt }}
                    </li>
                    <li class="list-group-item">
                        {{ Constants.privacy_note }}
                    </li>
            </div>
        </div>
    </div>
{% endif %}
<div class="card my-3">
    <div class="card-header">
        Ваше решение:
    </div>


    <div class="card-body">
        <div class="card-text">
            <div class="mb-3 _formfield">

                <div class="controls d-flex flex-lg-row flex-sm-column">
                    {% for ch in player.html_dg_decision_choices %}
                        <div class="form-check form-check-inline">

                            <input class="form-check-input dg-decision" type="radio" id="id_dg_decision-{{ ch.id }}"
                                   name="dg_decision"
                                   required=""
                                   value="{{ ch.value }}">
                            <label for="id_dg_decision-{{ ch.id }}" class="form-check-label">{{ ch.label }}</label>
                        </div>
                    {% endfor %}
                </div>
            </div>
            <ol class="list-group  ">
                <li class="list-group-item d-flex justify-content-between align-items-start">
                    <div class="ms-2 me-auto">
                        <div class="fw-bold">Ваш бонус:</div>

                    </div>
                    <div class="display-6">
                        <span class="badge bg-primary rounded-pill"><span id="ownpayoff"></span></span>
                    </div>
                </li>
                <li class="list-group-item d-flex justify-content-between align-items-start">
                    <div class="ms-2 me-auto">
                        <div class="fw-bold">Бонус участника Б:</div>

                    </div>
                    <div class="display-6">
                        <span class="badge bg-primary rounded-pill "><span id="alterpayoff"></span></span>
                    </div>
                </li>

            </ol>
        </div>
    </div>
</div>


<script>
    const formatter = (i)=>{return (i/100).toFixed(2)+'$'}
    const $own = $('#ownpayoff')
    const $alter = $('#alterpayoff')
    const egoendowment = {{ player.egoendowment|json }}
    const alterendowment = {{ player.alterendowment|json }}
    const egopayoff = formatter(egoendowment)
    const alterpayoff = formatter(alterendowment)
    $own.html( egopayoff)
    $alter.html( alterpayoff)
    $('.dg-decision').change(function(){
        const val = $(this).val();
        const egopayoff = formatter(egoendowment-parseInt(val))
        const alterpayoff = formatter(alterendowment+parseInt(val))
        $own.html( egopayoff)
        $alter.html( alterpayoff)
    })
</script>

{{ next_button }}

{{ endblock }}
